<script setup lang="ts">
import { ref } from 'vue';
import Header from './components/Header.vue';
import MyClass from './components/MyClass.vue';

const value = ref('')
const images = ref([
    "assets/background.png"
])
</script>

<template>
    <div class="container">
        <Header name="主页"></Header>
        <van-search v-model="value" placeholder="请输入搜索关键词" />
        <van-swipe :autoplay="3000" lazy-render class="swipe">
            <van-swipe-item>
                <van-image src="/src/assets/background.png"
                    width="100%" height="100%"
                ></van-image>
            </van-swipe-item>
        </van-swipe>
        <div class="content">
            <MyClass></MyClass>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    .swipe {
        width: 94%;
        height: 20%;
        margin: 3%;
        border-radius: 15px;
    }
    .content {
        height: 50%;
        margin: 3%;
        width: 94%;
    }
}
</style>